<template>
    <div class="app-container">
        <Levelbar></Levelbar>
        <TableLayout form-title="">

            <el-form :model="search" ref="search" :rules="rules" slot="form" label-width="100px">
                <el-row :gutter="41">
                    <el-col :span="8">
                        <el-form-item label="学校名称">
                            <school v-model="search.schoolName" style="width:100%" @change='schoolChange'></school>
                        </el-form-item>
                    </el-col> 
                    <el-col :span="8">
                        <el-form-item label="手机号" prop="payPhone">
                            <el-input v-model="search.payPhone" :maxlength="11" placeholder="请输入手机号" style="width:100%"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="支付人">
                            <el-input v-model="search.payName" :maxlength="11" placeholder="请输入支付人" style="width:100%"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="41">
                    <el-col :span="8">
                        <el-form-item label="支付方式">
                            <el-select v-model="search.payMethod" placeholder="请选择支付方式" style="width:100%">
                                <el-option v-for="item in payMethods" :key="item.pId" :label="item.sName" :value="item.pId">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col> 
                </el-row>
                <div class="top-line">
                    <el-button type="primary" class="top-btn" @click="onSubmit('search')">查询</el-button>
                    <!-- <el-button class="top-btn" @click="reset('query')">清空</el-button> -->
                </div>
            </el-form>

            <div class="total-sales" slot = "showPanel">
                <el-form label-width="85px">
                    <el-row :gutter="41">
                        <el-col :span="8">
                            <el-form-item label="月份" prop="month">
                                <el-date-picker v-model="search.month" type="month" placeholder="选择月" style="width:100%" @change = "changeVipOrderStatistics"></el-date-picker>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
                
                <div class="current-month">
                    <div class="current-item">
                        <div class="title">订单量</div>
                        <div class="data" v-cloak>{{!orderList.orderQuantity ? '--' : orderList.orderQuantity}}</div> 
                    </div>

                    <div class="current-item">
                        <div class="title">分成总额¥</div>
                        <div class="data" v-cloak>{{!orderList.devidedAllMoney ? '--' : orderList.devidedAllMoney}}</div> 
                    </div>
                </div>
            </div>
            <!--<div slot="form-title" class="table-title"></div>-->

            <div class="table-title" slot="table-title"></div>
            
            <el-table :data="tableData" v-loading="loading" style="width: 100%" border>
                <el-table-column label="学校名称" prop="schoolName"  width="170" align="center"></el-table-column>
                <el-table-column label="支付人" prop="payName" align="center"></el-table-column>
                <el-table-column label="家长手机号" prop="payPhone" align="center"></el-table-column>
                <el-table-column label="购买月数" prop="buyMonth" align="center"></el-table-column>
                <el-table-column label="支付时间" prop="payTime"  width="170" align="center"></el-table-column>
                <el-table-column label="支付方式" prop="payType" align="center">
                    <template scope="scope">
                        <!-- 状态 1e学 2支付宝 3微信 4激活码 -->
                        {{scope.row.payType == '1' ? 'e学云' : scope.row.payType == '2' ? '支付宝' : scope.row.payType == '3' ? '微信' : scope.row.payType == '4' ? '激活码' : ''}}
                    </template>
                </el-table-column>
                <el-table-column label="支付金额¥" prop="payMoney"  width="170" align="center"></el-table-column>
                <el-table-column label="分成比例" prop="dividedPercentage"  width="170" align="center"></el-table-column>
                <el-table-column label="分成金额¥" prop="devidedMoney"  width="170" align="center"></el-table-column>
                <el-table-column label="订单号" prop="orderNum"  width="170" align="center">
                    <template scope="scope">
                        {{!scope.row.orderNum? '--' : scope.row.orderNum}}
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination-container" style="text-align:right">
                <el-pagination
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="listQuery.total"
                    :current-page.sync="listQuery.page"
                    :page-sizes="config.pageSizes"
                    :page-size="config.pageSize"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange">
                </el-pagination>
            </div>
        </TableLayout>
    </div>
</template>

<script>
import Levelbar from '../layout/Levelbar';
import TableLayout from 'components/TableLayouts';
import { mapState, mapActions } from 'vuex';
import Cookies from 'js-cookie';
import validate from '@/utils/validate';
import school from 'components/SchoolClasss/school';
import {
    getVipOrderStatistics,
    pageVipOrder
} from 'api/numberManagement';

export default {
    name: 'orderDetails',
    components: { Levelbar, TableLayout, school },
    data() {
        return {
            loading: false,
            schoolList: [], // 学校名称集合
            tableData: [], // 外table集合
            listQuery: {
                page: 1,
                total: 1
            },
      // 查询条件集合
            search: {
                month: '',
                schoolName: '',
                schoolId: '',
                payPhone: '',
                payName: '',
                payMethod: ''
            },

            orderList: [],
            payList: [],
            // 支付方式1e学 2支付宝 3微信 4激活码
            payMethods: [
                {
                    pId: '',
                    sName: '请选择'
                },
                {
                    pId: '1',
                    sName: 'e学云'
                },
                {
                    pId: '2',
                    sName: '支付宝'
                },
                {
                    pId: '3',
                    sName: '微信'
                }
                // {
                //     pId: '4',
                //     sName: '激活码'
                // }
            ],
            rules: {
                payPhone: [...validate.phone()]
            }
        };
    },
    created() {
        this.queryData();
        this.changeVipOrderStatistics();
    },
    computed: {
        ...mapState({
            config: state => state.config.table
        })
    },
    methods: {
        ...mapActions(['ChangePageSize']),
        handleSizeChange(val) {
            this.listQuery.page = 1;
            this.ChangePageSize(val);
            this.queryData();
        },
        handleCurrentChange(val) {
            this.listQuery.page = val;
            this.queryData();
        },
        schoolChange(val) {
            
            this.search.schoolId = val;

        },

        changeVipOrderStatistics(val) {
            getVipOrderStatistics('1', val).then(data => {
                this.orderList = [];
                if (data.data.content) {
                    this.orderList = data.data.content;
                }
            }).catch(Error => {
                this.$message.error(Error);
            });

        },
        onSubmit(ruleForm) {
            this.$refs[ruleForm].validate((valid) => {
                if (valid) {
                    this.queryData();
                    this.listQuery.page = 1;
                } else {
                    return false;
                }
            });
        },
        queryData() {
            this.loading = true;
            pageVipOrder(
                '1',
                this.listQuery.page,
                this.config.pageSize,
                this.search.payPhone,
                !this.search.schoolId
                ? ''
                : this.search.schoolId,
                this.search.payName,
                this.search.payMethod
            ).then(data => {
                this.loading = false;
                this.tableData = [];
                if (data.data.content) {
                    this.tableData = data.data.content.list;
                    this.listQuery.total = data.data.content.pagination.total;
                }
            }).catch(Error => {
                this.$message.error(Error);
                this.tableData = [];
                this.loading = false;
            });
        },
        // 返回年月  yyyy - mm
        filterDate(val) {
            if (val) {
                let month = val.getMonth() + 1 + '';
                return `${val.getFullYear()}-${month.length > 1 ? month : '0' + month}`;
            } else {
                return ''
            }
        },

        // 通过id查找对应的数组里面的值
        fiflterArray(id) {
            if (id) {
                let num = null;
                this.schoolList.forEach(item => {
                    if (item.pId == id) {
                        num = item.sName;
                    }
                });
                return num;
            }
        },
        exportTable() {
            // this.loading = true;
            // 获取token
            if (this.listQuery.total !== '0') {
                let Token = Cookies.get('accessToken');
                window.location.href = `${LOCAL_API.ly}/serviceOrder/exportOrderDetailData?schoolId=${this
                .search.schoolId}&classId=${this.search
                .className}&incrementId=${this.search
                .shopName}&createDate=${this.filterDate(
                this.search.month
                )}&phone=${this.search.phone}&AccessToken=${Token}`;
            } else {
                this.$message('目前没有数据哦~~');
            }

        }
    }
};
</script>

<style lang="scss" scoped>
.app-container {
  position: relative;
  padding: 20px 20px 10px;
  $bgcolor: #fff;
  @mixin box-item() {
    overflow: hidden;
    background: $bgcolor;
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
    color: #333;
    font-size: 14px;
    padding: 20px 20px;
  }
  @mixin tip-css {
    display: inline-block;
    height: 12px;
    width: 6px;
    border-left: 3px solid #ff5e2c;
    padding-left: 15px;
  }
  .app-levelbar {
    height: 35px;
  }
  .total-sales {
    @include box-item();
    padding: 40px 20px 10px;
    
    margin-top: 15px;
    .sales-title {
      .tip {
        @include tip-css();
      }
      .current-time {
        padding-right: 8px;
      }
    }
    .current-month {
      display: flex;
      justify-content: space-around;
      padding: 20px;
      padding-top: 30px;
      .current-item {
        .title {
          font-size: 16px;
          color: #aaa;
          width: 50px;
          padding-bottom: 30px;
          width: 160px;
          text-align: center;
        }
        .data {
          font-size: 26px;
          color: #333;
          text-align: center;
          width: 160px;
        }
      }
    }
  }
}
</style>